/*
 *@description:商品详情
 *@Author:@rennan
 *@Date:2023-12-27 14:40:50
 *@version: V1.0.0
*/
<template>
  <div class="card_box">
    <div class="product_box">
      <!-- 图片区域 -->
      <div class="box_left">
        <img src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
      </div>
      <!-- 项目描述区域 -->
      <div class="box_right">
        <!-- 项目名以及描述 -->
        <div class="right_top">
          <!-- name 和 status -->
          <div class="name_status">
            <div class="card_name">{{orderItem.customer.realname }}</div>
            <div class="card_status">{{orderItem.status}}</div>
          </div>
          <div class="card_address">{{ orderItem.address.city}}{{ orderItem.address.area }}</div>
          <!-- 价格 -->
          <div class="card_price">{{ orderItem.total }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['orderItem'],
  data() {
    return {
    }
  }
}
</script>
<style scoped>
.card_box {
  padding:0 2em;
  margin-top:1em;
}
.product_box {
  width: 90%;
  height: 90px;
  padding: 1em 1em;
  box-shadow: 0 0 6px 0 #ccc;
  display:flex;
}
.box_left {
  width:80px;
  height:80px;
  border-radius:50% ;
  background-color:red;
}
.box_left img {
  width:100%;
}
.box_right{
  flex:1;
  margin-left:10px;
  position:relative;
}
.right_top .name_status {
  display:flex;
  justify-content: space-between;
}

.card_price {
  position:absolute;
  bottom:0;
  right:10px;
}
</style>